<template>
    <div class="chart" v-loading="loading">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>门店每月巡店结果分布趋势</span>
                </div>
            </template>
            <div class="chart-wrap">
                <div id="shopTourChart" class="chartsBox" v-show="isShowChart"></div>
                <el-empty description="暂无数据" v-show="!isShowChart"/>
            </div>
        </el-card>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { distributionTrend } from '@/api/bigData/storeInspection.js';
const shopTourChart = shallowRef(null)
const loading = ref(false)
const isShowChart = ref(false)
defineExpose({getData})

function getData(data) {
        loading.value = true;
        let option = {
            legend: {
                data: ['问题数量']
            },
            grid: {
                top: '30',
                bottom: '30',
                left: '30',
                right: '30'
            },
            tooltip: {
                trigger: 'axis',
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [],
                    type: 'line',
                    name: '问题数量'
                }
            ]
        }
        let url = `/intelligent/store/distributionTrend?serviceId=${toRaw(data).serviceId}&shopId=${toRaw(data).shopId}&startDateTime=${toRaw(data).startDateTime}&endDateTime=${toRaw(data).endDateTime}`
        distributionTrend(url).then(res=>{
            if(res.data?.problemRankingList?.length) {
                isShowChart.value = true;
                nextTick(() => {
                    shopTourChart.value = echarts.init(document.getElementById('shopTourChart'));
                    option.xAxis.data = res.data?.problemRankingList.map((item)=>{
                        return item.typeName
                    })
                    option.series[0].data = res.data?.problemRankingList.map((item)=>{
                        return item.value
                    })
                    shopTourChart.value.setOption(option)
                    window.addEventListener('resize', ()=>{
                        setTimeout(() => {shopTourChart.value.resize();},100)
                    })
                    loading.value = false;
                })
            }else{
                loading.value = false;
                isShowChart.value = false
            }
        })
        
}

</script>
<style lang="scss" scoped>
.card-header{
    font-weight: bold;
}
.chart-wrap{
    width: 100%;
    height: 400px;
    display: flex;
    .chartsBox {
        width: 100%;
        height: 100%;
    }
    .el-empty{
        width: 100%;
        height: 100%;
    }
}

</style>